<template>
    <div class="settlement-page">
        <el-breadcrumb separator=">">
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/qualification' }">数据概览</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="settlement-content">
            <!-- <div class="content"> -->
            <!-- 卡片 -->
            <div class="card">
                <div class="item">
                    <div style="height: 200px;">
                        <vue3-tree-org :data="treeData1" center :horizontal="false" :collapsable="false"
                             :only-one-node="false" :scalable="false"
                             />
                    </div>
                </div>
                <div class="item">
                    <div style="height: 200px;">
                        <vue3-tree-org :data="treeData2" center :horizontal="false" :collapsable="false"
                             :only-one-node="false" :scalable="false"
                             />
                    </div>
                </div>
                <!-- （零售柜）总销售额 -->
                <div class="item">
                    <div class="data">
                        <div class="name">（零售柜）总销售额:</div>
                        <div class="value">¥ 20000000</div>
                    </div>
                    <div class="btns">
                        <div class="btn">今日</div>
                        <div class="btn">本周</div>
                        <div class="btn">本月</div>
                        <div class="btn">本年</div>
                        <div class="btn total">总销售额</div>
                    </div>
                </div>
            </div>
            <!-- 经营情况+经营分析 -->
            <div class="analysis">
                <!-- 经营情况 -->
                <div class="left">
                    <div class="title">
                        （零售柜）经营情况
                    </div>
                    <div class="analysis-item">
                        <div>
                            <div class="name">
                                昨日成交额
                            </div>
                            <div class="value">
                                ￥90000.00
                            </div>
                        </div>
                        <div>
                            <div class="name">
                                今日成交额
                            </div>
                            <div class="value">
                                ￥120000.00
                            </div>
                        </div>
                    </div>
                    <!-- 订单数 -->
                    <div class="analysis-item">
                        <div>
                            <div class="name">
                                昨日订单数
                            </div>
                            <div class="value">
                                ￥90000.00
                            </div>
                        </div>
                        <div>
                            <div class="name">
                                今日订单数
                            </div>
                            <div class="value">
                                ￥120000.00
                            </div>
                        </div>
                    </div>
                    <!-- 交易均价 -->
                    <div class="analysis-item">
                        <div>
                            <div class="name">
                                昨日交易均价
                            </div>
                            <div class="value">
                                ￥90000.00
                            </div>
                        </div>
                        <div>
                            <div class="name">
                                今日交易均价
                            </div>
                            <div class="value">
                                ￥120000.00
                            </div>
                        </div>
                    </div>
                    <!-- 退款金额 -->
                    <div class="analysis-item">
                        <div>
                            <div class="name">
                                昨日退款金额
                            </div>
                            <div class="value">
                                ￥90000.00
                            </div>
                        </div>
                        <div>
                            <div class="name">
                                退款金额
                            </div>
                            <div class="value">
                                ￥120000.00
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 经营分析 -->
                <div class="right">
                    <div class="title">
                        （零售柜）经营情况
                    </div>
                    <div class="tabs">
                        <el-button round :color="tabActive == 1 ? '#0071bb' : ''" @click="changeTab(1)">今日</el-button>
                        <el-button round :color="tabActive == 2 ? '#0071bb' : ''" @click="changeTab(2)">本周</el-button>
                        <el-button round :color="tabActive == 3 ? '#0071bb' : ''" @click="changeTab(3)">本月</el-button>
                        <el-button round :color="tabActive == 4 ? '#0071bb' : ''" @click="changeTab(4)">本年</el-button>
                    </div>
                    <div style="width: 100%; height: 340px; position: relative">
                        <div id="main" style="width: 100%; height: 340px"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- </div> -->
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from 'vue'
const cloneNodeDrag = ref(true)
const treeData1 = ref({
          "id":1,"label":"设备总数:10000",
          "style":{"color":"#fff","background":"#FAAF3B"},
          "children":[
              {
                  "id":2,"pid":1,"label":"零售柜：6000",
                  "style":{"color":"#fff","background":"#FAAF3B"},
                  "children":[
                      {"id":6,"pid":2,"label":"在线设备：7980","disabled":true,"style":{"color":"#fff","background":"#0071bb"},},
                      {"id":8,"pid":2,"label":"离线设备：20","noDragging":true,"style":{"color":"#fff","background":"red"},},
                  ]
              },
              {
                  "id":3,"pid":1,"label":"提货柜：6000",
                  "style":{"color":"#fff","background":"#FAAF3B"},
                  "children":[
                      {"id":11,"pid":3,"label":"在线设备：7980","style":{"color":"#fff","background":"#0071bb"},},
                      {"id":12,"pid":3,"label":"离线设备：20","style":{"color":"#fff","background":"red"}}
                  ]
              }
          ]
      })
      const treeData2 = ref({
          "id":1,"label":"总订单数：36000",
          "style":{"color":"#fff","background":"#FAAF3B"},
          "children":[
              {
                  "id":2,"pid":1,"label":"零售柜：6000",
                  "style":{"color":"#fff","background":"#108ffe"},
                  "children":[
                      {"id":6,"pid":2,"label":"成交量：7980","disabled":true,"style":{"color":"#fff","background":"#0071bb"},},
                      {"id":8,"pid":2,"label":"退单量：20","noDragging":true,"style":{"color":"#fff","background":"red"}},
                  ]
              },
              {
                  "id":3,"pid":1,"label":"提货柜：6000",
                  "style":{"color":"#fff","background":"#FAAF3B"},
                  "children":[
                      {"id":11,"pid":3,"label":"已提货数：7980","style":{"color":"#fff","background":"#0071bb"},},
                      {"id":12,"pid":3,"label":"待提货数：20","style":{"color":"#fff","background":"red"}}
                  ]
              }
          ]
      })
// const style = ref({
//     background: "#fff",
//     color: "#5e6d82",
// })
const tabActive = ref(1)
const changeTab = (val: number) => {
    tabActive.value = val
}
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    // 绘制图表
    myChart.setOption({
        xAxis: {
            type: "category",
            data: ["01号", "05号", "10号", "15号", "20号", "25号", "30号"],
        },
        yAxis: {
            type: "value",
        },
        legend: {
            data: ["交易额", "订单数"],
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
            textStyle: {
                color: "#fff", //设置文字颜色
            },
        },
        series: [
            {
                name: "订单数",
                type: "line",
                stack: "Total",
                itemStyle: {
                    color: "#94d8f3",
                },
                data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: "交易额",
                type: "line",
                stack: "Total",
                itemStyle: {
                    color: "#ff9223",
                },
                data: [120, 132, 101, 134, 90, 230, 210],
            },
        ],
    });
    // 监听窗口大小变化
    window.addEventListener("resize", () => {
        if (myChart) {
            myChart.resize();
        }
    });
});
</script>

<style scoped lang="scss">
.settlement-page {
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #f1f1f1;
}

.settlement-content {
    padding: 10px;
    background: #fff;
    margin-top: 20px;
    border-radius: 4px;
}

.aic {
    display: flex;
    justify-content: center;
}


.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.card {
    display: flex;
    width: 100%;

    .item {
        flex: 1;
        border: 1px solid #ccc;
        margin-right: 20px;
        border-radius: 10px;
        padding: 10px;
    }

    .item:last-child() {
        margin-right: 0;
    }
}

.data {
    background: #0071bb;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    padding-bottom: 30px;

    .name {
        margin-bottom: 10px;
    }

    .value {
        margin-bottom: 30px;
    }
}

.btns {
    display: flex;
    color: #fff;
}

.btn {
    // width: 90px;
    flex:1;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: rgb(246, 146, 30);
    border-radius: 15px;
    font-size: 12px;
    margin-right: 10px;
}

.total {
    background-color: #0071bb;
}

.btn:last-child() {
    margin-right: 0px;
}

.analysis {
    margin-top: 20px;
    display: flex;

    .left {
        width: 30%;
        margin-right: 20px;
    }

    .right {
        width: 70%;
    }

    .title {
        background: #6d6d6d;
        height: 40px;
        line-height: 40px;
        color: #fff;
        margin-bottom: 20px;
    }
}

.analysis-item {
    display: flex;
    background: #00ffff;
    padding: 6px 0;
    margin-bottom: 10px;

    .name {
        color: #989898;
        font-size: 12px;
    }

    &>div {
        flex: 1;
        text-align: center;
    }
}

.tabs {
    margin-bottom: 10px;
}
:deep(.zm-tree-org){
    padding: 0 !important;
}
:deep(.zm-tree-handle){
    display: none;
}
:deep(.tree-org-node__content .tree-org-node__inner){
    border-radius: 20px;
    font-size: 12px;
    // background: rgb(246, 146, 30) !important;
    // color: #fff !important;
}
:deep(.tree-org-node.is-leaf, .tree-org-node.collapsed){
    padding-right:0px;
}
:deep(.tree-org-node__children:before){
    border-left:1px solid rgb(246, 146, 30);
}

:deep(.tree-org-node::after){
    border-left:1px solid rgb(246, 146, 30);
}
:deep(.tree-org>.tree-org-node.tree-org-node:first-child::after){
  border-left:none !important;
}
</style>
<style>
.tree-org-node:not(:first-child):before, .tree-org-node:not(:last-child):after{
    border-top:1px solid rgb(246, 146, 30) !important;
}
</style>